<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-steps
            :active="active"
            finish-status="success"
            align-center
            :space="200"
            style="padding-top: 50px; padding-left: 40px"
          >
            <el-step title="基础信息"></el-step>
            <el-step title="薪资规则"></el-step>
            <el-step title="考勤规则"></el-step>
            <el-step title="计税规则"></el-step>
          </el-steps>  
          <el-divider></el-divider>

          <!-- 第一页  -->
            <div class="kuai-one" v-if="active==0">
                <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                >
                <el-form-item label="方案名称" prop="name">
                    <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <br />
                <el-form-item label="薪资周期" prop="region">
                    <el-select v-model="ruleForm.region" style="width: 190px">
                    <el-option label="上上月" value="1"></el-option>
                    <el-option label="上月" value="2"></el-option>
                    <el-option label="本月" value="3"></el-option>
                    <el-option label="下月" value="4"></el-option>
                    <el-option label="下下月" value="5"></el-option>
                    </el-select>
                    &nbsp;&nbsp;
                    <el-select v-model="ruleForm.num" style="width: 190px">
                    <el-option label="01" value="1"></el-option>
                    <el-option label="02" value="2"></el-option>
                    <el-option label="03" value="3"></el-option>
                    <el-option label="04" value="4"></el-option>
                    <el-option label="05" value="5"></el-option>
                    </el-select>
                 </el-form-item>
                <br/>
                 <el-form-item label="税款周期" prop="region">
                    <el-select v-model="ruleForm.region2" style="width: 190px">
                    <el-option label="上上月" value="1"></el-option>
                    <el-option label="上月" value="2"></el-option>
                    <el-option label="本月" value="3"></el-option>
                    <el-option label="下月" value="4"></el-option>
                    <el-option label="下下月" value="5"></el-option>
                    </el-select>
                 </el-form-item>
                <br/>
                <el-form-item label="选择人员" >
                   <el-select v-model="ruleForm.a" placeholder="请选择" style="width: 400px">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
                </el-form>
            </div>

          <!-- 第二页 -->
          <div v-if="active==1">
             <el-button style="margin-top: 10px;margin-left:40px;" @click="dialogFormVisible = true"  type="primary"
              >新建分类</el-button>
              <el-dialog title="设置薪资项名称" :visible.sync="dialogFormVisible" width="30%">
                <el-form :rules="rules">
                  <el-form-item label="名称" :label-width="formLabelWidth" prop="formName">
                    <el-input v-model="formName" autocomplete="off" ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
              </el-dialog>
              <br/><br/>
              <div class="kuang"></div>
              <span style=" padding-left:40px;" >人事信息</span>
              <div class="xian"></div>
              <div style="padding-top:20px;padding-left:40px;">
                <el-table :data="tableData" border style="width: 99%">
                    <el-table-column prop="date" label="薪资项" width="250"></el-table-column>
                    <el-table-column prop="name" label="规则" width="350"></el-table-column>
                    <el-table-column prop="address" label="数据来源" width="250"> </el-table-column>
                    <el-table-column prop="address" label="类型" width="230"> </el-table-column>
                     <el-table-column
                        fixed="right"
                        label="操作"
                        width="150"
                        >
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            设置
                            </el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                      <el-button
                                      @click="insert(scope.$index, scope.row)"
                                      type="text" >
                                      添加一条
                                      </el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
              </div>
              <br/><br/>
              <div class="kuang"></div>
              <span style=" padding-left:40px;" >基本薪酬</span>
              <div class="xian"></div>
              <div style="padding-top:20px;padding-left:40px;">
                <el-table :data="tableData" border style="width: 99%">
                    <el-table-column prop="date" label="薪资项" width="250"></el-table-column>
                    <el-table-column prop="name" label="规则" width="350"></el-table-column>
                    <el-table-column prop="address" label="数据来源" width="250"> </el-table-column>
                    <el-table-column prop="address" label="类型" width="230"> </el-table-column>
                     <el-table-column
                        fixed="right"
                        label="操作"
                        width="150"
                        >
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            设置
                            </el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>生成台账</el-dropdown-item>
                                    <el-dropdown-item>修改</el-dropdown-item>
                                    <el-dropdown-item>撤销</el-dropdown-item>
                                    <el-dropdown-item>停用</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
              </div>
              <br/><br/>
              <div class="kuang"></div>
              <span style=" padding-left:40px;" >补贴</span>
              <div class="xian"></div>
              <div style="padding-top:20px;padding-left:40px;">
                <el-table :data="tableData" border style="width: 99%">
                    <el-table-column prop="date" label="薪资项" width="250"></el-table-column>
                    <el-table-column prop="name" label="规则" width="350"></el-table-column>
                    <el-table-column prop="address" label="数据来源" width="250"> </el-table-column>
                    <el-table-column prop="address" label="类型" width="230"> </el-table-column>
                     <el-table-column
                        fixed="right"
                        label="操作"
                        width="150"
                        >
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            设置
                            </el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>生成台账</el-dropdown-item>
                                    <el-dropdown-item>修改</el-dropdown-item>
                                    <el-dropdown-item>撤销</el-dropdown-item>
                                    <el-dropdown-item>停用</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
              </div>
              <br/><br/>
              <div class="kuang"></div>
              <span style=" padding-left:40px;" >薪酬结果</span>
              <div class="xian"></div>
              <div style="padding-top:20px;padding-left:40px;">
                <el-table :data="tableData" border style="width: 99%">
                    <el-table-column prop="date" label="薪资项" width="250"></el-table-column>
                    <el-table-column prop="name" label="规则" width="350"></el-table-column>
                    <el-table-column prop="address" label="数据来源" width="250"> </el-table-column>
                    <el-table-column prop="address" label="类型" width="230"> </el-table-column>
                     <el-table-column
                        fixed="right"
                        label="操作"
                        width="150"
                        >
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            设置
                            </el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>生成台账</el-dropdown-item>
                                    <el-dropdown-item>修改</el-dropdown-item>
                                    <el-dropdown-item>撤销</el-dropdown-item>
                                    <el-dropdown-item>停用</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
              </div>
          </div>
          <!-- 第三页 -->
           <div v-if="active==2">
             
              <div class="kuang"></div>
              <span style=" padding-left:40px;" >标准计薪天数</span>
              <div class="xian"></div>
               <br />
               <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                >
               
                <el-form-item label="计薪时长" prop="xinNum" style="padding-top:20px;padding-left:40px;">
                    <el-select v-model="ruleForm.xinNum" style="width: 320px">
                    <el-option label="月应出勤天数折算" value="1"></el-option>
                    <el-option label="月应出勤天数折算+法定节假日折算" value="2"></el-option>
                    <el-option label="自定义" value="3"></el-option>
                    </el-select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <el-input v-model="ruleForm.xinTian" style="width: 70px"></el-input>天/月
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    月应出勤天数 ×<el-input v-model="ruleForm.xinShi" style="width: 70px"></el-input>小时/天
                 </el-form-item>
                  <el-form-item label="入/离职规则" prop="resource" style="padding-top:20px;padding-left:40px;">
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio label="按调薪后的工资计算（按照转正或调薪后的工资计算）" style="padding-top:10px;"></el-radio>
                      <br/> 
                      <el-radio label="按调薪前的工资计算（按照转正或调薪前的工资计算）" style="padding-top:30px;"></el-radio>
                      <br/> 
                      <el-radio label="混合计算（生效日期前按照转正或调薪前的工资计算，生效日期后按照转正或调薪后的工资计算）" style="padding-top:30px;"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <br/><br/>
                  <div class="kuang"></div>
                  <span style=" padding-left:40px;" >旷工扣款规则</span>
                  <div class="xian"></div>
                    <el-form-item label="计薪规则" style="padding-top:20px;padding-left:40px;">
                      <el-radio-group v-model="ruleForm.a">
                        <el-radio label="固定奇数"></el-radio>
                        <el-radio label="引用变量"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                   
                    <el-form-item label="扣款比例" style="padding-top:-20px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.bili" style="width: 180px"
                    ></el-input>%
                    </el-form-item>

                    <el-form-item label="计薪基数" style="padding-top:10px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.ji" style="width: 350px" placeholder="请输入"
                    ></el-input>
                    </el-form-item>

                    <el-form-item label="人性化设置" style="padding-top:-20px;padding-left:40px;">
                      每月累计旷工不超过
                    <el-input
                    v-model="ruleForm.bbb" style="width: 180px"
                    ></el-input>小时，不扣款
                    </el-form-item>

                     <br/><br/>
                  <div class="kuang"></div>
                  <span style=" padding-left:40px;" >加班工资规则</span>
                  <div class="xian"></div>
                    <el-form-item label="计薪规则" style="padding-top:20px;padding-left:40px;">
                      <el-radio-group v-model="ruleForm.a">
                        <el-radio label="固定奇数"></el-radio>
                        <el-radio label="引用变量"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                   
                    <el-form-item label="加班基数比例" style="padding-top:-20px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.bili" style="width: 180px"
                    ></el-input>%
                    </el-form-item>

                    <el-form-item label="计薪基数" style="padding-top:10px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.ji" style="width: 350px" placeholder="请输入"
                    ></el-input>
                    </el-form-item>
                     <el-form-item label="工作日比例" style="padding-top:-20px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.bili" style="width: 180px"
                    ></el-input>%
                    </el-form-item>
                     <el-form-item label="休息日比例" style="padding-top:-20px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.bili" style="width: 180px"
                    ></el-input>%
                    </el-form-item>
                     <el-form-item label="节假日比例" style="padding-top:-20px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.bili" style="width: 180px"
                    ></el-input>%
                    </el-form-item>
                     <br/><br/>
                  <div class="kuang"></div>
                  <span style=" padding-left:40px;" >病假扣款规则</span>
                  <div class="xian"></div>
                    <el-form-item label="计薪规则" style="padding-top:20px;padding-left:40px;">
                      <el-radio-group v-model="ruleForm.a">
                        <el-radio label="固定奇数"></el-radio>
                        <el-radio label="引用变量"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                   
                    <el-form-item label="扣款比例" style="padding-top:-20px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.bili" style="width: 180px"
                    ></el-input>%
                    </el-form-item>

                    <el-form-item label="计薪基数" style="padding-top:10px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.ji" style="width: 350px" placeholder="请输入"
                    ></el-input>
                    </el-form-item>

                    <el-form-item label="人性化设置" style="padding-top:-20px;padding-left:40px;">
                      每月累计病假不超过
                    <el-input
                    v-model="ruleForm.bbb" style="width: 180px"
                    ></el-input>小时，不扣款
                    </el-form-item>
                    <br/><br/>
                  <div class="kuang"></div>
                  <span style=" padding-left:40px;" >事假扣款规则</span>
                  <div class="xian"></div>
                    <el-form-item label="计薪规则" style="padding-top:20px;padding-left:40px;">
                      <el-radio-group v-model="ruleForm.a">
                        <el-radio label="固定奇数"></el-radio>
                        <el-radio label="引用变量"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                   
                    <el-form-item label="扣款比例" style="padding-top:-20px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.bili" style="width: 180px"
                    ></el-input>%
                    </el-form-item>

                    <el-form-item label="计薪基数" style="padding-top:10px;padding-left:40px;">
                    <el-input
                    v-model="ruleForm.ji" style="width: 350px" placeholder="请输入"
                    ></el-input>
                    </el-form-item>

                    <el-form-item label="人性化设置" style="padding-top:-20px;padding-left:40px;">
                      每月累计事假不超过
                    <el-input
                    v-model="ruleForm.bbb" style="width: 180px"
                    ></el-input>小时，不扣款
                    </el-form-item>

                  <br/><br/>
                  <div class="kuang"></div>
                  <span style=" padding-left:40px;" >迟到早退扣款规则</span>
                  <div class="xian"></div>
                    <div style="padding-top:30px;padding-left:70px;color:#909399;font-size:14px;">
                     扣款方式 &nbsp;&nbsp;&nbsp;
                      <el-button type="primary" plain autofocus="true" size="small" @click="getMethod">迟到时长</el-button>
                      <el-button type="primary" plain size="small" @click="getType">迟到次数</el-button>
                    </div>
                    <div style="padding-top:30px;padding-left:40px;color:#909399;font-size:14px;">
                     迟到扣款规则 &nbsp;&nbsp;&nbsp;
                      {{ruleForm.method}}
                    </div>

                  <br/><br/>
                  <div class="kuang"></div>
                  <span style=" padding-left:40px;" >全勤奖规则</span>
                  <div class="xian"></div>
                  <br/>
                  <div style="padding-left:70px;color:#909399;font-size:14px; display: inline;">
                    发放规则 &nbsp;&nbsp;&nbsp;
                  </div>
                  <span style="font-size:14px">满足以下条件可享受全勤奖</span><br/><br/>
                  <el-form-item label="员工状态" style="padding-left:120px;">
                    <el-checkbox-group v-model="ruleForm.status" >
                      <el-checkbox label="试用期员工" name="type"></el-checkbox>
                      <el-checkbox label="正式员工" name="type"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="工作性质" style="padding-left:120px; position: relative;top:-15px">
                      <el-checkbox-group v-model="ruleForm.status" >
                        <el-checkbox label="全职" name="type"></el-checkbox>
                        <el-checkbox label="兼职" name="type"></el-checkbox>
                        <el-checkbox label="实习生" name="type"></el-checkbox>
                        <el-checkbox label="劳务派遣" name="type"></el-checkbox>
                      </el-checkbox-group>
                  </el-form-item>
                   <div style="padding-left:70px;color:#909399;font-size:14px; display: inline;">
                    扣款规则 &nbsp;&nbsp;&nbsp;
                  </div>
                  <span style="font-size:14px">满足以下任意条件，扣发全勤奖</span><br/><br/>
                   <el-form-item label="员工状态" style="padding-left:120px;">
                    <el-checkbox-group v-model="ruleForm.status" >
                      <el-checkbox label="迟到早退" name="type"></el-checkbox>
                      <el-checkbox label="缺勤" name="type"></el-checkbox>
                      <el-checkbox label="年假" name="type"></el-checkbox>
                      <el-checkbox label="调休" name="type"></el-checkbox>
                      <el-checkbox label="事假" name="type"></el-checkbox>
                      <el-checkbox label="产假" name="type"></el-checkbox>
                      <br/>
                      <el-checkbox label="育儿假" name="type"></el-checkbox>
                      <el-checkbox label="陪产假" name="type"></el-checkbox>
                      <el-checkbox label="病假" name="type"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
               </el-form>
           </div>
           <!-- 第四页 -->
           <div class="kuai_three" v-if="active==3">
              <el-form  :model="ruleForm" label-width="80px">
                <el-form-item label="全职计税" >
                  <el-radio-group v-model="ruleForm.bbb">
                    <el-radio label="工资所得"></el-radio>
                    <el-radio label="劳务报酬所得"></el-radio>
                    <el-radio label="不计税"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="兼职计税" style="position: relative;top:-62px;left:500px;">
                  <el-radio-group v-model="ruleForm.aaa">
                    <el-radio label="工资所得"></el-radio>
                    <el-radio label="劳务报酬所得"></el-radio>
                    <el-radio label="不计税"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="实习计税" style="position: relative;top:-62px;">
                  <el-radio-group v-model="ruleForm.bbb">
                    <el-radio label="工资所得"></el-radio>
                    <el-radio label="劳务报酬所得"></el-radio>
                    <el-radio label="不计税"></el-radio>
                  </el-radio-group>
                </el-form-item>
                  <el-form-item label="劳务派遣" style="position: relative;top:-122px;left:500px;">
                  <el-radio-group v-model="ruleForm.aaa">
                    <el-radio label="工资所得"></el-radio>
                    <el-radio label="劳务报酬所得"></el-radio>
                    <el-radio label="不计税"></el-radio>
                  </el-radio-group>
                </el-form-item>
                 <el-form-item label="外包计税" style="position: relative;top:-122px;">
                  <el-radio-group v-model="ruleForm.bbb">
                    <el-radio label="工资所得"></el-radio>
                    <el-radio label="劳务报酬所得"></el-radio>
                    <el-radio label="不计税"></el-radio>
                  </el-radio-group>
                </el-form-item>
                
              </el-form>
           </div>
          <div style="margin-left: 1000px;">
            <el-button style="margin-top: 12px" @click="fan" v-if="active == 0"
            >取消</el-button
            >
            <el-button style="margin-top: 12px" @click="tui" v-if="active != 0" 
              >上一步</el-button
            >
            <el-button style="margin-top: 12px" @click="next" v-if="active != 3" type="primary"
              >下一步</el-button
            >
            <el-button
              style="margin-top: 12px"
              @click="getSubmit"
              v-if="active == 3"
              type="primary"
              >提交</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      salary:{
        id:undefined,
        // 方案名称
        schemeName:"",
        //  薪资周期 1:上上月 2:上月 3:本月 4:下月 5:下下月
        salaryCycle: 1,
        // 薪资周期的某一天  范围在 xxxx年x月01日至30日
        salaryDays: 1,
        // 税款周期 1:上上月 2:上月 3:本月 4:下月 5:下下月
        taxPeriod : 3,
        // 选择部门
        deptId :undefined,
        // 补贴
        tSubsidy:{
          // 薪资项名称
          payroll : "",
          // 自定义规则
          rules : 0,
          // 补贴类型 1.税前加项 2.税前减项
          subsidyType: 1
        },
        // 标准计薪规则
        standardPayrollRules:{
          // 计薪时长 1:月应出勤天数折算 2:月应出勤天数折算+法定假日折算 3:自定义
          durationOfPayroll :1,
          // 设置每月出勤天数
          customizeDay: 1,
          // 每日出勤小时数
          attendanceHours : 1,
          // 入/离职规则   1:按调薪后的工资计算（按照转正或调薪后的工资计算 2:按调薪前的工资计算（按照转正或调薪前的工资计算） 3:混合计算（生效日期前按照转正或调薪前的工资计算，生效日期后按照转正或调薪后的工资计算）
          rules: 1
        },
        // 病假扣款规则
        sickLeaveRules:{
          // 计薪规则 1:固定基数 2:引用变量
          sickPayrollRules : 1,
          // 扣除百分比
          sickDeductionPercentage : 0,
          // 计薪基数  选择固定基数按照 基本工资来计算
          sickSalaryBase: "",
          // 人性化设置
          sickFriendlySettings: 1

        }, 
        // 全勤奖发放规则表
        rulesForTheDistributionOfAttendanceAwards:{
          // 员工状态 1:试用期 2:正式期 3:已离职
          employeeStatus : 1,
          // 岗位性质 0:全职 1:兼职 2:实习生 3:劳务派遣
          postType : 0
        },
        // 事假请假规则
        personalLeaveRules:{
           // 计薪规则 1:固定基数 2:引用变量
          personalPayrollRules : 1,
          // 扣除百分比
          personalDeductionPercentage : 1,
          // 计薪基数  选择固定基数按照 基本工资来计算
          personalSalaryBase: "",
          // 人性化设置
          personalFriendlySettings  : 1
        },
         // 旷工扣款规则表
         absenteeismDeductionRules:{
           // 计薪规则 1:固定基数 2:引用变量
           absenteeismPayrollRules : 1,
          // 扣除百分比
          absenteeismDeductionPercentage : 1,
          // 计薪基数  选择固定基数按照 基本工资来计算
          absenteeismSalaryBase: "",
          // 人性化设置
          absenteeismFriendlySettings  : 1
        },
        // 加班规则
        overtimeRules:{
          // 计薪规则 1:固定基数 2:引用变量
          payrollRules : 1,
          // 加班基数比例 按百分比来计算
          overtimeBase : 1,
          // 计薪基数 如果选择固定基数按照基本工资计算
          salaryBase : 1,
          // 工作日比例 按照百分比来
          proportionO_workingDays :1,
          // 休息日比例 
          proportionOfDaysOff : 1,
          // 节假日比例
          proportionOfHolidays : 1.

        },
          // 迟到早退规则
        lateArrivalRules:{
          // 扣款方式 1:迟到时长 2:迟到次数
          deductionMethod: 1,
        },
        // 迟到扣款规则
        lateChargeRules:{
          //  区间 如果扣款方式选择选择迟到时长 单位 为小时  如果扣款方式选择选择迟到次数 单位 为次数
          lateInterval: 1,
          // 扣款规则 1:扣款 2:旷工
          lateDeductionRules : 1,
          // 扣款规则选择 扣款 单位为元 旷工为小时
          lateUnit :1
        },
        // 早退扣款规则表
        earlyRefundDeductionRules:{
          //  区间 如果扣款方式选择选择迟到时长 单位 为小时  如果扣款方式选择选择迟到次数 单位 为次数
          earlyInterval: 1,
          // 扣款规则 1:扣款 2:旷工
          earlyDeductionRules : 1,
          // 扣款规则选择 扣款 单位为元 旷工为小时
          earlyUnit :1
        }
      
        
      },
      ruleForm: {
        name: "",
        region: "3",
        num: "1",
        desc: "",
        xinNum:"3",
        xinTian:"21",
        xinShi:"8",
        resource:"",
        bili:"100",
        bbb:"5",
        method:"分钟", // 扣款方式
        status:[]
      },
       options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }, {
          value: '3',
          label: '蚵仔煎'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
        dialogFormVisible: false, 
        formLabelWidth: '60px', // 新建分类弹框 设置输入框居中
        formName: '',
         tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      rules: {
        name: [
          { required: true, message: "请输入方案名称", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        region: [
          { required: true, message: "请选择薪资周期", trigger: "change" },
        ],
        xinNum: [
          { required: true, message: "请选择计薪时长", trigger: "change" },
        ],
        resource: [
            { required: true, message: '请选择入/离职日期', trigger: 'change' }
        ],
        formName: [
          { required: true, message: "请输入薪资项名称", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      active: 0, //进度条默认打开第一页
    };
  },
  created() {},
  methods: {
    fan(){
        this.$router.push("/SalaryCalculate"); //返回
    },
    getType(){
       this.ruleForm.method="次数"; // 扣款方式
    },
    getMethod(){
      this.ruleForm.method="分钟"; // 扣款方式
    },
    //上一步
    tui() {
      if (this.active > 0) {
        this.active--;
      }
    },
    // 下一步
    next() {
      if (this.active < 3) {
        this.active++;
      }
    },
    //提交
    getSubmit() {},
  },
  insert(index, row){
  }
};
</script>

<style scoped>
.kuai-one {
  width: 500px;
  height: 300px;
  /* border: 1px solid red; */
  margin-left: 100px;
  margin-top: 40px;
}
.kuai_three{
  width: 1200px;
  height: 400px;
  /* border: 1px solid red; */
  margin-left: 100px;
  margin-top: 40px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
 
  
}
.bg-purple-dark {
  background: white;
  height: 3300px;
}


.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
 .kuang{
        width: 4.5px;
        height: 25px;
        background-color: #409EFF;
        margin-left: 30px;
        position: relative;
        top: 23px;
    }
    .xian{
        width: 1350px;
        height: 1px;
        background-color: #EBEEF5;
        margin-left: 40px;
        margin-top: 18px;
       
    }
</style>